<template>
  <div class="app-container" v-loading="dataLoading">
    <van-nav-bar :title="activityData.activityName" left-arrow @click-left="$router.back()" />
    <div class="content-box">
      <!-- <img class="banner" :src="require('@/assets/images/vote/vote_detail_img.png')" alt=""> -->
      <div class="info-box">
        <div class="title">{{ activityData.activityName }}</div>
        <!-- <div class="title sub">{{ '中国电信广东省工会' }}</div>
        <div class="status">
          <el-tag type="danger" effect="dark">{{ '进行中' }}</el-tag>
          <el-tag type="danger" effect="dark">{{ '匿名投票' }}</el-tag>
        </div> -->
        <div class="tip">{{ activityData.description }}</div>
        <div class="vote-box">
          <div class="vote-item" v-for="(item, index) in voteItemList" :key="index">
            <div class="label">
              <span class="text"> {{ `${index + 1}. ${item?.title || ''}` }}</span>
              <el-tag size="mini">{{ typeObj[item.type] }}</el-tag>
            </div>
            <div class="option-box">
              <div class="option-item" v-for="(option, optionIndex) in item.options" :key="option.label"
                :class="option.checked && 'checked'" @click="checkOptionItem(index, optionIndex)">
                {{ option.label }}
              </div>
            </div>
            <div class="require-tip" v-if="item.showRequire">
              {{ item.$required.length?item.$required:`请选择${item?.title}` }}</div>
          </div>
        </div>
      </div>
      <div class="handle-box">
        <div class="btn" @click="submit">投票</div>
      </div>
    </div>

  </div>
</template>

<script>
import * as api from '@/api/activityManger/index.js';

export default {
  name: 'VoteDetail',
  data() {
    return {
      dataLoading: false,
      activityData: {},
      optionData: {},
      typeObj: { radio: '单选', checkbox: '多选' },
      resultForm: { options: [] },
      voteItemList: [], // 表单项列表
      requireVoteItemList: [], // 必填项列表
      valid: true, // 校验状态
    };
  },
  async created() {
    if (this.$route.query.activityId) {
      this.dataLoading = true;
      this.resultForm.activityId = this.$route.query.activityId;
      // 获取活动数据
      const { rows: activityRows } = await api.getActivityList({ activityId: this.$route.query.activityId });
      this.activityData = activityRows[0];
      // 获取表单项数据
      const { rows: optionRows } = await api.getActivityOptionList({ activityId: this.$route.query.activityId });
      this.optionData = optionRows[0];
      this.voteItemList = JSON.parse(this.optionData.rule);
      // 表单项初始化
      this.voteItemList.forEach((item) => {
        item.options.forEach((item) => (item.checked = false));
        if (item.$required) this.requireVoteItemList.push(item);
      });
      this.dataLoading = false;
    }
  },
  methods: {
    // 点击选项
    checkOptionItem(index, optionIndex) {
      const voteItem = this.voteItemList[index]; // 选项
      // 单选时取消选择其他选项
      if (voteItem.type == 'radio' && !voteItem.options[optionIndex].checked) {
        voteItem.options.forEach((item) => (item.checked = false));
      }
      this.$set(this.voteItemList, index, voteItem);
      // 选择状态
      voteItem.options[optionIndex].checked = voteItem.options[optionIndex].checked ? false : true;
      this.$set(this.voteItemList, index, voteItem);
      // 处理结果
      this.handleResultForm(index, voteItem, optionIndex);
      // 处理必填
      if (voteItem.name$required) this.handleRequireItem(index, voteItem);
    },

    // 处理结果表单
    handleResultForm(index, voteItem, optionIndex) {
      // 表单对象是否已存在该选项
      const resultFormOptionItem = this.resultForm.options.find((item) => item?.field == voteItem.field);
      if (resultFormOptionItem) {
        // 单选
        if (voteItem.type == 'radio') {
          // 选择时
          if (voteItem.options[optionIndex].checked) {
            resultFormOptionItem.value = voteItem.options[optionIndex].value;
          } else {
            // 取消选择
            resultFormOptionItem.value = null;
          }
        }
        // 多选
        if (voteItem.type == 'checkbox') {
          // 是否存在已选项
          const arrItem = resultFormOptionItem.value.find((item) => item == voteItem.options[optionIndex].value);
          if (arrItem) {
            // 取消选择时
            if (!voteItem.options[optionIndex].checked) {
              resultFormOptionItem.value = resultFormOptionItem.value.filter((item) => item != arrItem);
              if (!resultFormOptionItem.value.length) {
                resultFormOptionItem.value = null;
              }
            }
            // 选项添加到多选数组中
          } else {
            resultFormOptionItem.value.push(voteItem.options[optionIndex].value);
          }
        }
        // 选项添加到表单对象
      } else {
        const valueItem = {
          index,
          title: voteItem.title,
          field: voteItem.field,
          type: voteItem.type,
        };
        if (voteItem.type == 'radio') valueItem.value = voteItem.options[optionIndex].value;
        if (voteItem.type == 'checkbox') valueItem.value = [voteItem.options[optionIndex].value];
        this.resultForm.options.push(valueItem);
      }
    },

    // 处理必填
    handleRequireItem(index, voteItem) {
      if (this.requireVoteItemList.some((item) => item.field == voteItem.field)) {
        if (this.resultForm.options.some((item) => item.field == voteItem.field)) {
          voteItem.showRequire = false;
          this.valid = true;
        } else {
          voteItem.showRequire = true;
          this.valid = false;
        }
        this.$set(this.voteItemList, index, voteItem);
      }
    },

    // 提交
    submit() {
      this.voteItemList.forEach((voteItem, index) => {
        // 处理未选项
        if (!this.resultForm.options.some((item) => item?.field == voteItem.field)) {
          const valueItem = {
            index,
            title: voteItem.title,
            field: voteItem.field,
            type: voteItem.type,
            value: null,
          };
          this.resultForm.options.push(valueItem);
        }
        // 处理必填
        if (voteItem.$required) this.handleRequireItem(index, voteItem);
      });
      // 选项排序
      this.resultForm.options.sort((a, b) => a.index - b.index);
      if (!this.valid) return;
      this.dataLoading = true;
      api.addActivityRecord({ ...this.resultForm }).then((res) => {
        this.$message({ message: '投票成功', type: 'success' });
        this.$router.push('/vote/index');
        this.dataLoading = false;
      });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/styles/mixin.scss';

.content-box {
  width: calc(100% - 40px);
  height: calc(100% - 90px);
  padding: 10px 20px;
  padding-top: 30px;
  display: flex;
  flex-direction: column;
  background-image: url('~@/assets/images/vote/BG.png');
  background-repeat: no-repeat;
  background-size: 100% auto;
  background-color: #e80000;
}

.banner {
  flex-shrink: 0;
  width: 100%;
}

.info-box {
  // flex-shrink: 0;
  flex: 1;
  border-radius: 10px;
  padding: 15px;
  background-color: #fff;

  & > div {
    margin-bottom: 15px;

    &:last-child {
      margin-bottom: 0px;
    }
  }

  .title {
    color: #3d3d3d;
    font-size: 18px;
    font-weight: bold;

    &.sub {
      font-size: 14px;
      font-weight: normal;
    }
  }

  .status {
    ::v-deep(.el-tag) {
      margin-right: 10px;

      &:last-child {
        margin-right: 0px;
      }
    }
  }

  .tip {
    color: #8d8d8d;
    font-size: 14px;
    white-space: pre-wrap;
  }

  .vote-box {
    margin: 20px 0;
    flex: 1;

    .vote-item {
      position: relative;
      padding-bottom: 25px;
    }

    .label {
      display: flex;
      align-items: center;

      .text {
        color: #3d3d3d;
        font-weight: bold;
        margin-right: 10px;
      }
    }

    .option-box {
      display: flex;
      justify-content: space-between;
      margin-top: 15px;

      .option-item {
        padding: 10px 20px;
        border-radius: 10px;
        background-color: #eeeeee;
        color: #818181;
        font-weight: bold;

        &.checked {
          background-color: #ffc8c8;
          color: #c92020;
        }
      }
    }
    .require-tip {
      position: absolute;
      left: 0;
      bottom: 5px;
      font-size: 14px;
      color: #ff0000;
    }
  }
}

.search-input {
  margin: 15px 0;

  ::v-deep .el-input__inner {
    border-radius: 20px;
  }
}

// @include list-box-style;

.list-box {
  width: calc(100% - 30px);
  flex: 1;
  border-radius: 10px;
  padding: 15px;
  background-color: #fff;

  .list-content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .list-item {
    position: relative;
    width: 48%;
    height: 160px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin-top: 20px;

    &:nth-child(-n + 2) {
      margin-top: 0px;
    }

    .cover-img {
      z-index: 0;
      position: absolute;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .item-top-box {
      position: relative;
      z-index: 1;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 8px;

      .item-detail {
        padding: 5px;
        border-radius: 5px;
        background-color: #ffffff7f;
        font-size: 12px;
      }

      .item-check {
        display: inline-block;
        position: relative;
        border: 1px solid #dcdfe6;
        border-radius: 2px;
        box-sizing: border-box;
        width: 25px;
        height: 25px;
        background-color: #fff;
        z-index: 1;
        transition: border-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46),
          background-color 0.25s cubic-bezier(0.71, -0.46, 0.29, 1.46);

        &:after {
          box-sizing: content-box;
          content: '';
          border: 3px solid #fff;
          border-left: 0;
          border-top: 0;
          height: 14px;
          left: 7px;
          position: absolute;
          top: 2px;
          transform: rotate(45deg) scaleY(0);
          width: 6px;
          transition: transform 0.15s ease-in 0.05s;
          transform-origin: center;
        }

        &.checked {
          background-color: #409eff;
          border-color: #409eff;

          &:after {
            transform: rotate(45deg) scaleY(1);
          }
        }
      }
    }

    .item-bottom-box {
      position: relative;
      z-index: 1;
      background: linear-gradient(180deg, rgba(53, 53, 53, 0) 0%, #a9a9a9 100%);
      padding: 10px 0;
      text-align: center;
      font-size: 14px;
      color: #fff;
    }
  }
}

.handle-box {
  flex-shrink: 0;
  display: flex;
  justify-content: end;
  border-radius: 10px;
  padding: 15px;
  margin-top: 15px;
  background-color: #fff;

  .btn {
    padding: 7px 30px;
    border-radius: 20px;
    background-color: #e80000;
    color: #fff;
    cursor: pointer;
  }
}
</style>
